<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    <Online ref="onlineContent" />
  </div>
</template>

<script>
import { Notification } from 'element-ui';
import Online from "@/components/personalCenter/online/online"
import { sendWebsocket, closeWebsocket } from '@/utils/socketChat.js'
export default {
  components: {
    Online
  },
  name: "App",
  data() {
    return {
      websock: null,
      resultImg: '',
      isOpen: false
    }
  },
  //注意this.scrollTop是用户触发滚动事件获取的。
  // activated() {
  //   document.querySelector("body").scrollTop = this.scrollTop;
  // },
  created() {
    // debugger;
    // var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
    // console.log(userInfo)
    // if (userInfo.staffType === '8') {
    //   let token = sessionStorage.getItem("access_token");
    //   if (token) {
    //     this.$socketApi.initWebSocket();
    //   }
    // }
    // this.bus.$on('connectWeb', () => {
    //   this.initWebSocket();
    // });
    // this.bus.$on('chatWeb', () => {
    //   this.initChatSocket();
    // });
  },
  methods: {
    // socket信息返回接受函数
    getsocketResult(data) {
    },
    // 接收消息
    initWebSocket() {
      if ('WebSocket' in window) {
        var token = window.sessionStorage.getItem('access_token')
        var Base64 = require('@/utils/js-base64/base64').Base64;
        let baseToken = Base64.encode(token).replace(/=/g, '')
        const wsuri = this.url.systemUrl;//配置环境地址
        this.ws = new WebSocket(wsuri, [baseToken])
        this.$wsk.setWs(this.ws)
        this.ws.onopen = () => {
          // 连接成功后，赋值给全局对象 websocket
          console.log('系统消息连接 websocket 成功')
        }
        this.ws.onclose = e => {
          console.log('监听到websocket接收消息断开', e)
          // this.initWebSocket(this.token);
        }

        this.ws.onerror = e => {
          // console.log(e, '连接建立失败重连')
          this.initWebSocket(this.token);
        };
        this.ws.onmessage = e => {
          const redata = JSON.parse(e.data);
          // console.log(redata, '数据接收')
          this.$notify.info({
            title: '您收到了1条消息！',
            dangerouslyUseHTMLString: true,
            message: '<a style="color:#ff0000;cursor:pointer;" href="/msgCenter">' + redata.newsContent + '</a>',
            duration: 0
          });
        }
      } else {
        // 浏览器不支持 WebSocket
        alert('您的浏览器不支持 WebSocket，建议使用谷歌浏览器')
      }
    },
    // 聊天接收消息
    initChatSocket() {
      var that = this
      if ('WebSocket' in window) {
        var token = window.sessionStorage.getItem('access_token')
        var Base64 = require('@/utils/js-base64/base64').Base64;
        let baseToken = Base64.encode(token).replace(/=/g, '')
        const wsuri = this.url.chatUrl//配置环境地址
        this.wsChat = new WebSocket(wsuri, [baseToken])
        this.$socketApi.setWs(this.wsChat)
        this.wsChat.onopen = () => {
          // 连接成功后，赋值给全局对象 websocket
          console.log('聊天消息连接 websocket 成功')
          this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
          if (this.userInfo.staffType !== '8') {
            that.$refs.onlineContent.open()
          }

        }
        this.wsChat.onclose = e => {
          console.log('监听到websocket聊天消息断开', e)
          // this.initWebSocket(this.token);
        }

        this.wsChat.onerror = e => {
          // console.log(e, '连接建立失败重连')
          this.initWebSocket(this.token);
        };
        this.wsChat.onmessage = e => {
          const redata = JSON.parse(e.data);
          // console.log(redata, '数据接收')
          window.dispatchEvent(new CustomEvent('onmessageWS', {
            detail: {
              data: redata
            }
          }))
          if (redata === 403) {
            this.$confirm('当前客服繁忙，请稍后咨询!', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.$refs.onlineContent.handleAllClose()
            }).catch(() => {
              that.$refs.onlineContent.handleAllClose()
            });
          } else if (redata === 4040) {
            this.$confirm('当前客服繁忙，请稍后询问!', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.$refs.onlineContent.handleAllClose()
            }).catch(() => {
              that.$refs.onlineContent.handleAllClose()
            });
          }else if (redata === 1404) {
            this.$confirm('对方已离线!', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.$refs.onlineContent.handleAllClose()
            }).catch(() => {
              that.$refs.onlineContent.handleAllClose()
            });
          }  else if (redata === 500) {
            this.$confirm('连接报错!', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.$refs.onlineContent.handleAllClose()
            }).catch(() => {
              that.$refs.onlineContent.handleAllClose()
            });
          } else {
            if (that.$refs.onlineContent.dialogVisible == false) {
              this.$notify.info({
                title: '您收到了1条咨询消息！',
                dangerouslyUseHTMLString: true,
                duration: 0,
                message: '<span style="color:#ff0000;cursor:pointer;">请查看</span>',
                onClick: function () {
                  that.$refs.onlineContent.open()
                  Notification.closeAll()
                }
              });
            }

          }

        }
      } else {
        // 浏览器不支持 WebSocket
        alert('您的浏览器不支持 WebSocket，建议使用谷歌浏览器')
      }
    },
    // 点击跳转聊天页面
    handleChat(data) {
      // console.log(data)
    },
  },
  destroyed() {
  },
};
</script>

<style>


html,
body,
#app {
  height: 100%;
}

.personContainer {
  width: 1460px;
  margin: 0 auto;
}
/* /deep/.el-table th.el-table__cell:last-child>.cell{
  text-align:center!important;
} */
v::deep .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #EBEEF5;
    text-align:center!important;
}
</style>
